{layout name="vote/header" /}
<div class="wrapper detail-wrapper j_vote" id="app">
    <!--<div class="banner">-->
        <!--<img :src="banner">-->
    <!--</div>-->
    <!-- 主区域-->
    <div class="content" >
        <!-- 选手们-->
        <div class="detail-content clear j_acitvity" >
            <div class="item clear">
                <div class="video-area">
                    <div class="video-box" >
                        <!--<video :src="item.video_url" controls="controls" poster="front/img/video.png"></video>-->
                        <video :src="item.video_url" controls="controls" v-if="item.info_pick==1" :poster="item.img"></video>
                        <img :src="item.img" v-else>
                    </div>

                </div>
                <div class="person-area clear">
                    <div class="txt-area clear">
                        <p class="info" v-cloak>
                            {{item.name}}
                        </p>

                        <p class="ticket">票数:<span class="now-ticket j_now" v-cloak>{{item.total}}</span></p>

                    </div>
                    <div class="vote-btn j_vote_btn" @click="vote()" v-if="item.enable">
                        {$vote.vote_btn_name}
                    </div>
                    <div class="vote-btn j_vote_btn unable-vote-btn"  v-else>
                        {$vote.vote_btn_name}
                    </div>
                </div>
                <div class="intro-area">
                    <p class="intro-title">{{detail_name}}</p>
                    <div v-html="item.info">
                    </div>

                </div>
                <div class="intro-area" v-if="commentType != 3">
                    <p class="intro-title">评论</p>
                    <div class="msg-content">
                        <!--PC和WAP自适应版-->
                        <!--<div id="SOHUCS" sid="<TRS_DOCUMENT FIELD="DOCID"/>" ></div>
                        <script type="text/javascript">
                            (function(){
                                var appid = 'cytD2vUlc';
                                var conf = 'prod_2b4b14e88bf6d09a9ab5e73c2d2ec80d';
                                var width = window.innerWidth || document.documentElement.clientWidth;
                                if (width < 960) {
                                    window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })();
                        </script>-->
                        <div class="comment-num">
                            <span>{{commentNums}}</span>条评论
                        </div>
                        <div class="comment-input">
                            <textarea v-model="commentContent" class="comment-textbox" placeholder="来说两句吧……"></textarea>
                            <div class="comment-btn" @click="addComment">发表</div>
                        </div>
<!--                        <a href="" class="comment-convention">四川观察“留言”用户公约</a>-->
                        <p class="comment-title">最新评论</p>
                        <div class="comment-container">
                            <ul class="comment-list">
                                <li v-for="i in commentList" v-cloak>
                                    <p class="nickname">{{i.mobile}}</p>
                                    <p class="comment-content">{{i.content}}</p>
                                    <p class="comment-info">{{i.time}}</p>
                                </li>
                            </ul>
                            <div class="comment-more"  @click="more()" v-if="showMore">加载更多</div>
                            <div class="comment-none" v-if="noComment">暂无评论</div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {include file="vote/extend"}

</div>

<script>
    var item = {$item};
    var commentType = "{$vote.comment_type}";
    var sms = {
        time:0,//倒计时
        phone:"",
        code:"",
        content:"获取验证码",
    };
    new Vue({
        el:"#app",
        data:{
            is_login:"{$is_login}",
            banner:"{$banner}",
            item:item,
            enable_vote:true,
            commentType:commentType,
            commentNums:0,
            commentAll:[], //全部评论
            commentList:[], //显示的评论
            commentLimit:4, //评论每页显示数量
            showMore:false,
            noComment:false, //暂无评论
            commentContent:"", //评论内容
            userAgent : "{$app.app_ua}",
            enableCheck : "{$vote.enable_web}",
            sms:sms
        },
        created:function() {
            if(this.commentType != 3){
                this.getComment();
            }
            // console.log(this.is_web)
            // console.log(this.is_login)
        },
        computed:{
            detail_name :function () {
                var name = "{$vote.detail_name}";
                return name == ''?'作品简介':name;
            },
            enable_logout:function () {
                return 0;
            }
        },
        methods:{
            //投票
            vote:function () {
                var ua = navigator.userAgent;

                if(!this.checkIsApp()){
                    return ;
                }
                var _this =this;
                $.post("{:url('vote', ['site' => $site_id])}",{vote_id:this.item.vote_id,item_id:this.item.id},function (res) {
                    if(res.code == 500){
                        if(ua.indexOf(_this.userAgent)>-1){
                            //app内
                            $('#j-login').trigger('click');
                        }else {
                            //web端未登录
                            $("#j-to-login").removeClass("hide");
                        }
                        return false;
                    }else if(res.code){
                        _this.enable_vote = false
                    }else {
                        _this.item.total += res.data.add
                    }
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                },'json')

            },
            checkIsApp:function () {
                return checkApp(this.userAgent,this.enableCheck)
            },
            addComment:function(){
                var _this = this;
                var comment = this.commentContent.trim();
                if(comment == ""){
                    layer.open({
                        content: "评论不能为空"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return ;
                }

                if(comment.length > 250){
                    layer.open({
                        content: "请不要超过250个字符"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return ;
                }
                $.post("{:url('addComment', ['site' => $site_id])}",{vote_item_id:this.item.id,content:comment},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code == 500){
                        $('#j-login').trigger('click');
                        return ;
                    }else if(res.code == 0){
                        //评论成功并显示
                        _this.getComment();

                    }
                    _this.commentContent = "";
                },'json')
            },
            getComment:function () {
                var _this = this;
                $.post("{:url('getCommentList', ['site' => $site_id])}",{vote_item_id:this.item.id},function (res) {
                    if(res.data.length == 0){
                        //无评论
                        _this.noComment = true;
                        return ;
                    }else{
                        _this.noComment = false;
                    }
                    _this.commemtAll = res.data;

                    _this.commentNums = _this.commemtAll.length
                    var now = new Date().getTime();

                    _this.commemtAll.forEach(function (i) {
                        var timeDiff = now - i.addtime*1000
                        if( timeDiff<60*1000){
                            i.time = "刚刚";
                        }else if(timeDiff <3600*1000){
                            i.time = parseInt(timeDiff/60000)+"分钟前";
                        }else if(timeDiff < 24 *3600 *1000){
                            i.time = parseInt(timeDiff/3600000)+"小时前";
                        }else {
                            i.time = i.create;
                        }
                    })
                    if(_this.commemtAll.length > _this.commentLimit){
                        //需要分页
                        _this.showMore = true;
                        _this.commentList = _this.commemtAll.splice(0,_this.commentLimit);
                    }else{
                        //不许分页
                        _this.commentList = _this.commemtAll;
                    }
                },'json')
            },
            //评论下一页
            more:function () {
                var list = this.commemtAll.splice(0,this.commentLimit);
                this.commentList = this.commentList.concat(list);
                if(this.commemtAll.length <= 0)
                    this.showMore = false
            },
            send_code:function () {
                var _this = this;
                if(_this.sms.time>0){
                    return false;
                }
                if(!_this.checkPhone())
                    return false;

                $.post("/index/vote/send_code",{phone:_this.sms.phone},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        _this.sms.time = 60;
                        var inter = setInterval(function () {
                            console.log(_this.sms.time)
                            if(_this.sms.time>0){
                                _this.sms.content = "已发送("+_this.sms.time+")";
                            }else {
                                _this.sms.content = "发送验证码";
                                clearInterval(inter);
                            }
                            _this.sms.time--;
                        },1000)
                    }
                },'json')
            },
            web_login:function () {
                var _this = this;
                if(!_this.checkPhone()){
                    return false;
                }
                if(_this.sms.code==""){
                    layer.open({
                        content: "验证码不能未空"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                $.post("{:url('web_login', ['site' => $site_id])}",{phone:_this.sms.phone,code:_this.sms.code},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        setTimeout(function () {
                            // window.location.reload();
                            window.location.href = location.href+'?time='+((new Date()).getTime());
                        },1500)
                    }

                },"json")
            },
            checkPhone:function () {
                var reg = /^\d{11}$/;
                if(this.sms.phone == ''){
                    layer.open({
                        content: "请输入手机号码"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }

                if(!reg.test(this.sms.phone)){
                    layer.open({
                        content: "手机号码格式错误"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                return true;
            },
            logout:function () {
                layer.open({
                    content: '确定要退出吗？'
                    ,btn: ['退出', '取消']
                    ,yes: function(index){
                        $.get("{:url('web_logout', ['site' => $site_id])}",function (res) {
                            layer.open({
                                content: res.msg
                                ,skin: 'msg'
                                ,time: 2
                            })
                            if(res.code){
                                setTimeout(function () {
                                    // window.location.reload();
                                    window.location.href = location.href+'?time='+((new Date()).getTime());
                                },1500)
                            }
                        },'json')
                        layer.close(index);
                    }
                });
            },

        },
    })
</script>